<template>
    <el-container>
        <el-header>
            <div class="logo">科泰头条后台管理系统</div>
        </el-header>
        <!-- 将 el-alert 移动到这里 -->
        <el-alert
                v-if="showLoginSuccess"
                type="success"
                show-icon
                :message="loginSuccessMessage"
                center
                class="login-success-alert"
        ></el-alert>
        <el-main>
            <el-card class="login-card">
                <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="100px">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="loginForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                                ref="passwordInput"
                                type="password"
                                v-model="loginForm.password"
                                autocomplete="off"
                                @focus="showEye = true"
                                @blur="handleBlur"
                        ></el-input>
                        <el-button
                                v-show="showEye"
                                type="text"
                                @click="togglePasswordVisible"
                                class="password-toggle-btn"
                                icon="el-icon-view"
                                circle
                        ></el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },
                    {
                        min: 3,
                        max: 10,
                        message: '用户名长度在3 - 10个字符之间',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^[a-zA-Z0-9_]+$/,
                        message: '用户名只能包含字母、数字和下划线',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        message: '密码必须6位以上',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-])[a-zA-Z\d!@#$%^&*()_+\-]{6,}$/,
                        message: '密码需包含字母、数字和特殊字符，且至少6位',
                        trigger: ['blur', 'change']
                    }
                ],
                showEye: true,
                // 控制登录成功提示框的显示
                showLoginSuccess: true,
                // 登录成功提示信息
                loginSuccessMessage: '验证成功'
            }
        };
    },
    methods: {
        onSubmit() {
            this.$refs.loginForm.validate((valid) => {
                console.log("表单验证结果:", valid); // 打印验证结果方便调试
                if (valid) {
                    // 显示登录成功提示
                    this.showLoginSuccess = true;
                    setTimeout(() => {
                        this.showLoginSuccess = false;
                    }, 3000);
                    // 这里可以添加登录成功后跳转等逻辑，例如：
                    // this.$router.push('/home');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        togglePasswordVisible() {
            this.$refs.passwordInput.type = this.$refs.passwordInput.type === 'password'? 'text' : 'password';
        },
    }
};
</script>

<style scoped>
.el-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-header {
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #545c64;
    color: #fff;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.login-card {
    width: 300px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #fff;
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
}

.el-form-item.has-error.el-input__inner {
    border-color: red;
}

.el-form-item.has-error.el-form-item__error {
    color: red;
    margin-top: 5px;
}

.el-form-item.has-success.el-input__inner {
    border-color: green;
}

.el-form-item.is-password {
    position: relative;
}

/* 给登录成功提示框添加样式调试相关代码 */
.login-success-alert {
    border: 1px solid red; /* 添加红色边框方便查看是否显示 */
    z-index: 999; /* 提高层级确保能显示在前面 */
}
</style>